<script setup lang="ts">
import zhCN from "ant-design-vue/es/locale/zh_CN";
import logo from '~/assets/icon-trans.png'
import UserLoginModal from "~/components/userLoginModal.vue";
import BaseApp from "~/contentScripts/views/sycm/baseApp.vue";
import AnalysisModal from "~/contentScripts/views/tao/shopCategory/analysisModal.vue";
import {isLogin, token, user, userInfo} from '~/logic'
import Shop from "~/utils/ali/shop";

onMounted(() => {
  userInfo()
  let width = document.querySelector('#bd .J_TLayout').clientWidth
  document.querySelector('.xcsj-fixed-tool').style.marginLeft = width + 10 + 'px'
})
const loginVisible = ref(false)
const showAnalysis = ref<Boolean>(false)
const handle = () => {
  if (!token.value || !user.value) {
    loginVisible.value = true;
  } else {
    showAnalysis.value = true;
  }
}
onMounted(()=>{
  let url = new URL(window.location.href)
  let analysis = url.searchParams.get('analysis')
  if (analysis === 'true') {
    handle();
  }
})
</script>

<template>
  <base-app>
    <analysis-modal v-model:visible="showAnalysis"/>
    <div style="">
      <div class="xcsj-fixed-tool">
        <img :src="logo" style="width: 40px; height: 40px;">
        <div class="btn-box">
          <a-button size="small" type="primary" @click="handle">
            店铺宝贝分析
          </a-button>
        </div>
      </div>

      <UserLoginModal :login-visible="loginVisible" @close="loginVisible = false"/>
    </div>

  </base-app>
</template>

<style lang="less" scoped>
.xcsj-fixed-tool {
  background: #fff;
  border: 1px solid #eee;
  border-radius: 5px;
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, .1);
  margin-left: 0;
  margin-top: 0;
  text-align: center;
  width: 130px;
  height: 100px;
  position: fixed;
  z-index: 999999999;
  padding: 10px 0;
  box-sizing: border-box;

  .btn-box {
    padding-top: 10px;
  }
}
</style>
